<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="11">
        <div v-if="formData.name" class="dialog-content">
          <div class="view">
            <div style="padding: 1px">
              <h2 style="margin: 0px; padding: 0;line-height: 1.4; font-weight: 400;margin-bottom: 16px; font-size: 22px">{{ formData.name }}</h2>
              <div style="font-size: 15px; margin-bottom: 15px" class="">
                <span v-if="formData.original === 'true'" class="rich_media_meta icon_appmsg_tag appmsg_title_tag">原创</span>
                <span style="color: #8c8c8c; margin-right: 8px; font-size: 15px">{{ formData.author }}</span>
                <span style="color: #607fa6; margin-right: 8px; " class="animated infinite" data-event="1894; font-size: 15px">{{ formData.public_name }}</span>
                <span style="color: #8c8c8c; font-size: 15px">{{ formData.release_time }}</span>
              </div>
            </div>
            <div class="dialog-h5" v-html="formData.content" />
            <br>
            <br>
            <div style="font-size: 15px; margin-bottom: 15px" class="">
              <span style="color: #607fa6" class="animated infinite" data-event="1894; font-size: 15px"><a href="http://www.baidu.com" target="view_window">阅读原文</a></span>
              &nbsp;
              <span style="text-align: left; color: rgb(165, 165, 165);">阅读 &nbsp;{{ formData.reading || 0 }}</span>
            </div>
            <div class="box box-element ui-draggable" style="display: block;">
              <div class="view">
                <section data-material="0" class="material-block">
                  <section style="border:0 none;padding:0;box-sizing:border-box;margin:0;font-size:16px;font-family:微软雅黑">
                    <section class="material-br-t" style="margin-top: 2em; padding: 0.5em 0px; white-space: normal; border-style: solid none none; border-top-width: 1px; border-top-color: rgb(242,242,242); font-size: 1em; font-family: inherit; text-decoration: inherit; color: rgb(242,242,242); box-sizing: border-box;" />
                  </section>
                </section>
              </div>
            </div>
            <div style="color: #607fa6; width: 500px; overflow:hidden">
              <div style="float:left">分享</div>
              <div style="float:right">
                <span style="margin: 0 30px 0 0">赞 {{ formData.like || 0 }}</span>
                <span>在看 {{ formData.look || 0 }}</span>
              </div>
              <div style="margin-top: 35px; background-color: #363535">
                <a href="http://www.baidu.com" target="view_window"><img style="width: 100%" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></a>
                <div style="background-color: #363535;">
                  <div style="float: left; margin: 6px 0 0 10px"><a href="http://www.baidu.com" target="view_window"><img style="height: 40px; width: 40px; border-radius: 100%" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></a></div>
                  <div style="float: left; margin: 19px 0 0 20px"><a href="http://www.baidu.com" target="view_window" style="color: #ffffff">广告主名称</a></div>
                  <div style="float: right; margin: 0 20px 12px 0"><button class="ant-btn ant-btn-red" style="margin: 13px 0 0 0"><a href="http://www.baidu.com" target="view_window">查看详情</a></button></div>
                  <br>
                  <br>
                  <br>
                </div>
              </div>
              <div style="margin-top: 40px; height: 10px">
                <div style="float:left; color: rgb(165, 165, 165);">精选留言</div>
                <div style="float:right">写留言</div>
              </div>
              <article class="box box-element  not-icon ui-draggable" style="display: block;">
                <div class="view">
                  <article>
                    <ul style="padding:0px;margin:0">
                      <li style="position: relative; padding-left: 45px; margin-top: 26px;font-size: 16px;display: list-item; list-style:none">
                        <div style="float: right;">
                          <span style="display: inline-block; text-align: right; padding-top: 5px;  margin-top: -5px;">
                            <em class="icon-thumbs-o-up" style="color:#69F" />
                            <span style="color:#8c8c8c">391</span>
                          </span>
                        </div>
                        <div><strong style=" vertical-align: middle; font-weight: 400; font-style: normal; color: #727272;width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  word-wrap: normal; max-width: 9em;">杜乐儿</strong>
                          <img style="position: absolute;top: 0; left: 0;top: 3px;width: 35px;height: 35px;background-color: #ccc;vertical-align: top;margin-top: 0;border-radius: 2px;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></div>
                        <div>
                          <div style="color: #3e3e3e;line-height: 1.5;">有气质，哈哈哈 做了以后特别像抖音里 小姐姐，好美!</div>
                        </div>
                        <p style="color: #bdbdbd;font-size: 13px;">今天</p>
                      </li>
                    </ul>
                  </article>
                </div>
              </article>
              <article class="box box-element  not-icon ui-draggable" style="display: block;">
                <div class="view">
                  <article>
                    <ul style="padding:0px;margin:0">
                      <li style="position: relative; padding-left: 45px; margin-top: 26px;font-size: 16px;display: list-item; list-style:none">
                        <div style="float: right;">
                          <span style="display: inline-block; text-align: right; padding-top: 5px;  margin-top: -5px;">
                            <em class="icon-thumbs-o-up" style="color:#69F" />
                            <span style="color:#8c8c8c">391</span>
                          </span>
                        </div>
                        <div><strong style=" vertical-align: middle; font-weight: 400; font-style: normal; color: #727272;width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  word-wrap: normal; max-width: 9em;">杜乐儿</strong>
                          <img style="position: absolute;top: 0; left: 0;top: 3px;width: 35px;height: 35px;background-color: #ccc;vertical-align: top;margin-top: 0;border-radius: 2px;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></div>
                        <div>
                          <div style="color: #3e3e3e;line-height: 1.5;">有气质，哈哈哈 做了以后特别像抖音里 小姐姐，好美!</div>
                        </div>
                        <p style="color: #bdbdbd;font-size: 13px;">今天</p>
                      </li>
                    </ul>
                  </article>
                </div>
              </article>
              <article class="box box-element  not-icon ui-draggable" style="display: block;">
                <div class="view">
                  <article>
                    <ul style="padding:0px;margin:0">
                      <li style="position: relative; padding-left: 45px; margin-top: 26px;font-size: 16px;display: list-item; list-style:none">
                        <div style="float: right;">
                          <span style="display: inline-block; text-align: right; padding-top: 5px;  margin-top: -5px;">
                            <em class="icon-thumbs-o-up" style="color:#69F" />
                            <span style="color:#8c8c8c">391</span>
                          </span>
                        </div>
                        <div><strong style=" vertical-align: middle; font-weight: 400; font-style: normal; color: #727272;width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  word-wrap: normal; max-width: 9em;">杜乐儿</strong>
                          <img style="position: absolute;top: 0; left: 0;top: 3px;width: 35px;height: 35px;background-color: #ccc;vertical-align: top;margin-top: 0;border-radius: 2px;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></div>
                        <div>
                          <div style="color: #3e3e3e;line-height: 1.5;">有气质，哈哈哈 做了以后特别像抖音里 小姐姐，好美!</div>
                        </div>
                        <p style="color: #bdbdbd;font-size: 13px;">今天</p>
                      </li>
                    </ul>
                  </article>
                </div>
              </article>
            </div>
          </div>
        </div>
        <div v-else>
          <div style="text-align: center">
            <p>即刻预览</p>
            <p>当 “文章标题” 为空时不显示</p>
          </div>
        </div>
      </el-col>
      <el-col :span="13">
        <el-form ref="ruleForm" :model="formData" :rules="rules" :inline="true" label-width="85px" style="margin-left: 10%" label-position="right" size="small">
          <el-form-item label="立刻发布">
            <el-radio-group v-model="formData.release" style="width: 324.3px">
              <el-radio label="true">是</el-radio>
              <el-radio label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否原创">
            <el-radio-group v-model="formData.original" style="width: 324.3px">
              <el-radio label="true">是</el-radio>
              <el-radio label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="文章标题" prop="name">
            <el-input v-model="formData.name" placeholder="请输入文章标题" clearable style="width: 324.3px" />
          </el-form-item>
          <el-form-item label="文章作者">
            <el-input v-model="formData.author" placeholder="请输入文章作者" clearable style="width: 324.3px" />
          </el-form-item>
          <el-form-item label="公众号名称">
            <el-input v-model="formData.public_name" placeholder="请输入公众号名称" clearable style="width: 324.3px" />
          </el-form-item>
          <el-form-item label="公众号链接">
            <el-input v-model="formData.public" placeholder="请输入公众号链接" clearable style="width: 324.3px" />
          </el-form-item>
          <el-form-item label="发布时间">
            <el-date-picker
              v-model="formData.release_time"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width: 141%"
            />
          </el-form-item>
          <el-form-item style="margin-left: 12%">
            <vue-ueditor-wrap v-model="formData.content" :config="UEconfig" />
          </el-form-item>
          <el-form-item label="原文链接">
            <el-input v-model="formData.original_url" placeholder="请输入原文链接" clearable style="width: 324.3px" />
          </el-form-item>
          <el-form-item label="阅读">
            <el-input v-model="formData.reading" placeholder="请输入阅读数量" clearable style="width: 324.3px" @change="isReading" />
          </el-form-item>
          <el-form-item label="点赞">
            <el-input v-model="formData.like" placeholder="请输入点赞数量" clearable style="width: 324.3px" @change="isLike" />
          </el-form-item>
          <el-form-item label="在看">
            <el-input v-model="formData.look" placeholder="请输入在看数量" clearable style="width: 324.3px" @change="isLook" />
          </el-form-item>
          <el-form-item label="广告主名称">
            <el-input v-model="formData.advertisers" placeholder="请输入广告主名称" style="width: 324.3px" clearable />
          </el-form-item>
          <el-form-item label="广告主头像">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :limit="1"
            >
              <el-button size="mini" type="primary" style="width: 324.3px">点击上传广告主头像</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="广告主图">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :limit="1"
            >
              <el-button size="mini" type="primary" style="width: 324.3px">点击上传广告主图</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="广告主链接">
            <el-input v-model="formData.advertisers_url" placeholder="请输入广告主链接" style="width: 324.3px" clearable />
          </el-form-item>
          <el-form-item label="精选留言">
            <el-button type="primary" size="mini" style="width: 324.3px" @click="drawer = true">
              点我打开留言列表
            </el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: center; margin-top: 20px">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="SubmitForm">保存</el-button>
        </div>
      </el-col>
      <el-drawer
        title="留言列表"
        :visible.sync="drawer"
        size="50%"
      >
        <div style="text-align: right; margin: 0 29px 20px 0">
          <el-button type="primary" size="mini" @click="innerDrawer=true">写留言</el-button>
          <el-drawer
            title="新增留言"
            :append-to-body="true"
            :before-close="handleMessageClose"
            :visible.sync="innerDrawer"
          >
            <el-form ref="ruleForm" :model="messageData" :inline="true" style="margin-left: 10%" label-position="right" size="small">
              <el-form-item label="名称">
                <el-input v-model="messageData.name" placeholder="请输入名称" clearable />
              </el-form-item>
              <el-form-item label="赞数">
                <el-input v-model="messageData.like_number" placeholder="请输入点赞数" clearable />
              </el-form-item>
              <el-form-item label="留言">
                <el-input v-model="messageData.message" type="textarea" placeholder="写留言" clearable />
              </el-form-item>
            </el-form>
            <div style="text-align: center; margin-top: 20px">
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="SubmitForm">保存</el-button>
            </div>
          </el-drawer>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="名称"
            width="80px"
          />
          <el-table-column
            prop="message"
            label="留言"
          />
          <el-table-column
            prop="like_number"
            label="赞数"
            width="60px"
          />
          <el-table-column
            label="操作"
            width="80px"
            align="center"
          >
            <template>
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button
                  type="text"
                  icon="el-icon-delete"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </el-row>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import { addMenu, editMenu } from '@/api/menu'

export default {
  components: { VueUeditorWrap },
  data() {
    return {
      // UEditor配置项
      UEconfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 550,
        // 初始容器宽度
        initialFrameWidth: 350,
        serverUrl: process.env.VUE_APP_BASE_API + 'controller/',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: 'http://35.201.165.105:8000/controller.php',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/UEditor/'
      },
      formData: { release: 'true', original: 'true', content: '正文' },
      messageData: { release: 'true', original: 'true', content: '正文' },
      isEdit: '',
      formId: '',
      formDataBak: '',
      treeMenu: [],
      drawer: false,
      innerDrawer: false,
      tableData: [{
        image: '头像',
        name: '张三李四',
        message: '有气质，哈哈哈 做了以后特别像抖音里 小姐姐，好美!有气质，哈哈哈 做了以后特别像抖音里 小姐姐，好美!有气质，哈哈哈 做了以后特别像抖音里 小姐姐，好美!',
        like_number: '39111'
      }],
      // rules 表单前验证
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 传过来的值如果为 0则新增， 不是 0 则为编辑
    this.id = Number(this.$route.query.id)
  },
  methods: {
    SubmitForm() {
      // 表单验证并新增/编辑
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log(this.id)
          if (this.id === 0) {
            this.addForm()
          } else {
            this.editForm()
          }
        }
      })
    },
    addForm() {
      addMenu(this.formData).then((res) => {
        this.$notify.success({
          type: 'success',
          title: '成功',
          message: res.message,
          showClose: true,
          duration: 5 * 1000
        })
        this.isEditStatus()
        // $parent 子组件调用父组件方法
        this.$parent.getList()
      })
    },
    editForm() {
      editMenu(this.formid, this.formData).then((res) => {
        this.$notify.success({
          type: 'success',
          title: '成功',
          message: res.message,
          showClose: true,
          duration: 5 * 1000
        })
        this.isEditStatus()
        // $parent 子组件调用父组件方法
        this.$parent.getList()
      })
    },
    // 弹出框关闭后的函数
    handleClose(done) {
      this.$refs['ruleForm'].resetFields()
      this.formData = { name: '' }
    },
    isReading(event) {
      let fix
      if (typeof this.formData.reading === 'string') {
        fix = Number(this.formData.reading.replace(/\D/g, ''))
      }
      if (this.formData.reading < 1) {
        fix = 0
      }
      this.formData.reading = fix
    },
    isLike(event) {
      let fix
      if (typeof this.formData.like === 'string') {
        fix = Number(this.formData.like.replace(/\D/g, ''))
      }
      if (this.formData.like < 1) {
        fix = 0
      }
      this.formData.like = fix
    },
    isLook(event) {
      let fix
      if (typeof this.formData.look === 'string') {
        fix = Number(this.formData.look.replace(/\D/g, ''))
      }
      if (this.formData.look < 1) {
        fix = 0
      }
      this.formData.look = fix
    },
    handleMessageClose(done) {
      this.$confirm('还有未保存的工作哦确定关闭吗？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped>

  .dialog-content {
    height: 1400px;
    overflow-y:auto;
    overflow-x:hidden;
    width: 100%;
  }

  .dialog-h5 >>> img,p,span {
    width: 100%;
  }

  .rich_media_meta{display:inline-block;vertical-align:middle;margin:0 10px 10px 0;font-size:12px;-webkit-tap-highlight-color:rgba(0,0,0,0)}
  .icon_appmsg_tag{display:inline-block;vertical-align:middle;padding:0 .5em;font-size:12px;line-height:1.67;background-color: #f2f2f2;color: rgba(0,0,0,0.3);border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;max-width:70%}
  em{font-style:normal}.rich_media_meta{display:inline-block;vertical-align:middle;margin:0 10px 1px 0;font-size:12px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rich_media_meta.icon_appmsg_tag{margin-right:4px}.rich_media_meta.appmsg_title_tag{margin-right:8px}

  .ant-btn {
    line-height: 1.499;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
    box-shadow: 0 2px 0 rgba(0,0,0,0.015);
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    height: 28px;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 4px;
    color: rgba(0,0,0,0.65);
    background-color: #ffffff;
    border-color: #d9d9d9;
  }
  .ant-btn-red {
    color: #ffffff;
    background-color: #4d5055;
    border-color: #4d5055;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
  }
</style>

<style lang="scss">
  .el-drawer.rtl {
    overflow: scroll
  }
</style>
